<template>
<div class="home">
    <HomeNavBar></HomeNavBar>
    <div class="banner">
        <img src="https://image1.cdn.seaart.ai/static/2417dc8af8570f274e6775d4d60496da/20230512/3e237230f7a611b7eef647d1b2e94233.jpeg" alt="">
    </div>
    <homeSearchBox :hot-suggests="hotSuggests"></homeSearchBox>
    <homeCategories />
    <div  class="search-bar" v-if="isShowSearchBar">
        <searchBar :start-date="'09.26'" :end-date="'09.28'"></searchBar>
    </div>
    <homeContent />
    <!-- <button @click="moreBtnClick">加载更多</button> -->
</div> 
</template>
<script setup>
import {onUnmounted,onActivated,onDeactivated, ref,watch, computed} from 'vue' 
import HomeNavBar from './cpns/home-nav-bar.vue'
import homeSearchBox from './cpns/home-search-box.vue';
import useHomeStore from "@/store/modules/home";
import homeCategories from './cpns/home-categories.vue';
import homeContent from './cpns/home-content.vue';
import searchBar from '@/components/search-bar/index.vue';
import useScroll from '@/hooks/useScroll.js'
//热门建议
const hotSuggests = ref([])
// getHotSuggests().then(res =>{
//   hotSuggests.value = res.data;
// })
// 分类
// const categories = ref([])
// getCategories().then(res =>{
//     categories.value = res.data;
// })

// 热门建议
const storeHome = useHomeStore()
storeHome.fetchHotSuggestData()
storeHome.fetchCategoriesData()
// storeHome.fetchHouselistData()

// 加载更多
// const moreBtnClick = () => {

// }

// onActivated(()=>{
//     window.addEventListener("scroll",scrollListennerHandler)
// })
// onDeactivated(()=>{
//     window.removeEventListener("scroll",scrollListennerHandler)

// })
// 第一种方式
// useScroll(()=>{
//     storeHome.fetchHouselistData()
// })
// 第二种方式
const { isReachBottom, scrollTop } = useScroll()
watch(isReachBottom,(newValue)=>{
    if(newValue) {
        storeHome.fetchHouselistData().then((res)=>{
            isReachBottom.value = false
        })
    }
})

// 搜索框显示的控制
// const isShowSearchBar = ref(false)
// watch(scrollTop,(newValue)=>{
//     if(newValue) {
//         isShowSearchBar.value = newValue >100
//         console.log(newValue);
//     }
// })
const isShowSearchBar = computed(() =>{
    return scrollTop.value >= 350 
})
</script>
<style lang="less" scoped>
    /*局部css 支持css3 可以改变elementUI组件的样式 且组件样式调整只在本页面生效**/
    /*主样式*/
    .home{
        .banner{
            img{
                height: 150px;
                width: 100%;
            }
        }
    }
    .search-bar{
        position: fixed;
        z-index: 9;
        top: 0;
        left: 0;
        right: 0;
        height: 45px;
        padding: 16px 16px 10px;
        background-color: #ffffff;
    }
</style>